<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content" ref="outpatientIncomeStatistics">
        2019
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis6-xingbiebilitj',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){

    var labelData = [];
    for (var i = 0; i < 150; ++i) {
        labelData.push({
            value: 1,
            name: i,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0,
                        [{
                                offset: 0,
                                color: '#ffffff',//'#6dfbff'
                            },
                            {
                                offset: 1,
                                color: '#02aeff'
                            }
                        ]
                    )
                }
            }
        });
    }         

    let pieData = [
        {
            name: '11323人',
            value: 80,
        },
        {
            name: '8456人',
            value: 60,
        },
    ];

    var titleArr = [],
        seriesArr = [];

    pieData.forEach(function (item, index) {
        titleArr.push({
            text: item.value+"%\n"+item.name,
            left: index * 35 + 30 + '%',
            top: '80%',
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: '14',
                color: 'white',
                textAlign: 'center',
            },
        });
        seriesArr.push(
            {
                name: '外层细圆环',
                hoverAnimation: false,
                type: 'pie',
                z: 2,
                data: labelData,
                radius: ['52%', '55%'],
                center: [index * 35 + 30 + '%', '45%'],
                zlevel: -2,
                itemStyle: {
                    normal: {
                        borderColor: '#1f1e26',
                        borderWidth: 1,
                    }
                },
                label: {
                    normal: {
                        position: 'inside',
                        show: false,
                    }
                },
            },
            {
                type: 'pie',
                name: '内层层细圆环',
                radius: ['38%', '43%'],
                center: [index * 35 + 30 + '%', '45%'],
                hoverAnimation: false,
                clockWise: true,
                itemStyle: {
                    normal: {
                        color: '#6e7175',
                    },
                },
                label: {
                    show: false,
                },
                data: [100],
            }
        );
    });

    seriesArr.push(
        {
            name: pieData[0].name,
            type: 'pie',
            clockWise: true,
            radius: ['44%', '49%'],
            
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#00BAFF',
                        },
                        {
                            offset: 1,
                            color: '#00BAFF',
                        },
                    ]),
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            center: [0 * 35 + 30 + '%', '45%'],
            data: [
                {
                    value: pieData[0].value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + '%';
                            },
                            position: 'center',
                            show: false,
                            textStyle: {
                                fontSize: '14',
                                // fontWeight: 'bold',
                                color: '#1cc7ff',
                            },
                        },
                    },
                },
                {
                    value: 100 - pieData[0].value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,0.2)',
                        },
                        emphasis: {
                            color: 'rgba(0,0,0,0)',
                        },
                    },
                },
            ],
        },
        {
            name: pieData[1].name,
            type: 'pie',
            clockWise: true,
            radius: ['44%', '49%'],
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                          offset: 0,
                          color: '#FFFF00',
                      },
                      {
                          offset: 1,
                          color: '#FFFF00',
                      },
                    ]),
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            center: [1 * 35 + 30 + '%', '45%'],
            data: [
                {
                    value: pieData[1].value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + '%';
                            },
                            position: 'center',
                            show: false,
                            textStyle: {
                                fontSize: '14',
                                // fontWeight: 'bold',
                                color: '#1cc7ff',
                            },
                        },
                    },
                },
                {
                    value: 100 - pieData[1].value,
                    name: 'invisible',                    
                    itemStyle: {                      
                        normal: {
                            color: 'rgba(0,0,0,0)',
                        },
                        emphasis: {
                            color: 'rgba(0,0,0,0)',                            
                        },
                    },
                },
            ],
        }
    );
    let ImageUrl1="";
    let ImageUrl2="";
    let option = {
      graphic: [
        {
          elements: [{
                type: 'image',
                style: {
                    image: ImageUrl1,
                    width: "30",
                    height: "30"
                },
                left: '27%',
                top: '35%'
            },{
              type: 'image',
              style: {
                  image: ImageUrl2,
                  width: "30",
                  height: "30"
              },
              left: '62%',
              top: '35%'
          }]
        }
      ],
      backgroundColor: '',
      title: titleArr,
      series: seriesArr,
      };
      this.makeGraph(this.$refs.outpatientIncomeStatistics,option)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>